前端程式設計筆記彙整 (完整版)

第八章：資料清洗與畫面渲染

從外部 API 取得的資料常帶有缺漏，需透過以下語法進行防呆處理：[cite: 5]

1. 變數防呆與預設值賦予

三元運算子： let img = item.PicURL ? item.PicURL : "default.jpg"; (條件成立給左邊，失敗給右邊)。[cite: 5]
Nullish Coalescing (??)： 判斷是否為 null 或 undefined。[cite: 5]
Optional Chaining (?.)： item.Images[0]?.URL (避免屬性不存在導致網頁崩潰)。[cite: 5]

2. 陣列處理方法

map()：格式化原始陣列產生新陣列。[cite: 5]
filter()：篩選特定條件 (如：city === '臺中市')。[cite: 5]
forEach()：遍歷資料，常用於生成 HTML 結構並 append。[cite: 5]

3. 實戰應用：資料清洗與畫面渲染 (showdata 函數解析)

取得 API 資料後，我們會撰寫一個函數來處理防呆並動態生成 HTML。以下為經典的資料處理流程：

function showdata(data) {
    console.log(data); // 測試：在終端機確認回傳的資料結構

    $("#mybody").empty(); // 【重要】清空現有容器，避免多次觸發導致資料重複疊加

    data.forEach(function (item) {
        // --- 資料防呆處理 ---
        // 使用三元運算子判斷：若 API 有提供圖片網址就使用，否則塞入預設圖片
        let img = item.PicURL ? item.PicURL : "images/01.jpg"; 
        let tel = item.Tel ? item.Tel : "未提供電話";
        let hword = item.HostWords ? item.HostWords : "未提供簡介";

        // --- 組合 HTML 字串 ---
        // 使用 ES6 樣板字面值 (反引號 `) 輕鬆跨行並嵌入變數
        let strHTML = `<tr>
            <td data-th="店家編號"><span>${item.ID}</span></td>
            <td data-th="店家圖片">
                <span><img src="${img}" width="200px" alt=""></span>
            </td>
            <td data-th="店家名稱"><span>${item.Name}</span></td>
            <td data-th="店家地址"><span>${item.City} ${item.Town} ${item.Address}</span></td>
            <td data-th="店家電話"><span>${tel}</span></td>
            <td data-th="店家簡介">
                <span>${hword}</span>
            </td>
        </tr>`;
        
        // --- 動態渲染 ---
        // 將組合好的 HTML 插入到網頁上的 tbody (#mybody) 中
        $("#mybody").append(strHTML);
    });
}

程式碼細節重點總結：

empty() 的必要性： 若不先清空容器，當使用者點擊「重新整理資料」按鈕時，新的資料會一直附加在舊資料下方。
data-th 的連動作用： HTML 結構中的 data-th="店家名稱" 是為了解決手機版 RWD 表格的排版問題，CSS 會透過 attr(data-th) 將標題抓取出來顯示。
防呆優勢： 在 img 與 tel 加上預設值，保證就算政府的 Open Data 有欄位缺失，使用者的網頁也不會出現難看的「破圖」或顯示 undefined。